
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<style>
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: orange;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({ 
		/*sectionsColor: ['red', 'yellow', 'blue', '#f90'],*/
		anchors: ['page1', 'page2', 'page3', 'page4'],
		menu: '#menu'
	});
});
</script>
</head>

<body>

<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1">卧室</a></li>
	<li data-menuanchor="page2"><a href="#page2">客餐厅</a></li>
	<li data-menuanchor="page3"><a href="#page3">儿童房</a></li>
	<li data-menuanchor="page4"><a href="#page4">阳台</a></li>
	<li data-menuanchor="page5"><a href="index.html#top">返回首页</a></li>
</ul>

<div id="dowebok">
	<div class="section section1"style="background: url(img/room/背景.jpg);">
		<div class="room">
			<ul class="room_1">
				<li>
					<img src="img/room/卧室.jpg"/>
					<div class="shadow">经典雅致</div>
				</li>
				<li>
					<img src="img/room/卧室1.jpg"/>
					<div class="shadow">简单实用</div>
				</li>
				<li>
					<img src="img/room/卧室2.jpg"/>
					<div class="shadow">置顶设计</div>
				</li>
				<li>
					<img src="img/room/卧室3.jpg"/>
					<div class="shadow">青春活力</div>
				</li>
			</ul>
			<ul class="room_1"style="margin-top: 20px;">
				<li>
					<img src="img/room/卧室4.png"/>
					<div class="shadow">温馨舒适</div>
				</li>
				<li>
					<img src="img/2-big-3.jpg"/>
					<div class="shadow">简单宽敞</div>
				</li>
				<li>
					<img src="img/2-big-5.jpg"/>
					<div class="shadow">简约时尚</div>
				</li>
				<li>
					<img src="img/3-big-9.jpg"/>
					<div class="shadow">精致实用</div>
				</li>
			</ul>
		</div>
		
	</div>
	<div class="section section2"style="background: url(img/room/背景1.jpg);">
		<div class="can">
			<div class="zuo_1"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
			<div class="canting">
				<ul class="can_1"style="left: 0px;">
					<li class="can_2">
						<div>
							<img src="img/room/客厅.jpg"/>
						</div>
						<div>
							<img src="img/room/客餐厅.jpg"/>
						</div>
						<div>
							<img src="img/room/客餐厅1.jpg"/>
						</div>
					</li>
					<li class="can_2">
						<div>
							<img src="img/1-big-3.jpg"/>
						</div>
						<div>
							<img src="img/1-big-2.jpg"/>
						</div>
						<div>
							<img src="img/2-big-4.jpg"/>
						</div>
					</li>
					<li class="can_2">
						<div>
							<img src="img/3-big-5.jpg"/>
						</div>
						<div>
							<img src="img/4-big-1.jpg"/>
						</div>
						<div>
							<img src="img/4-big-3.jpg"/>
						</div>
					</li>
				</ul>
			</div>
			<div class="you_1"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></div>
		</div>
		
	</div>
	<div class="section section3"style="background: url(img/room/背景2.jpg)no-repeat;background-size: 100% 100%;">
		<!--旋转木马-->
		<div id="box">
	        <ul>
	            <li><img class="pic" src="img/room/儿童房.jpg" ></li>
	            <li><img class="pic" src="img/room/儿童房5.jpg" ></li>
	            <li><img class="pic" src="img/room/儿童房6.jpg" ></li>
	            <li><img class="pic" src="img/room/儿童房3.jpg" ></li>
	            <li><img class="pic" src="img/room/儿童房7.jpg" ></li>
	        </ul>
	        <div id="arrow">
				<div class="right">
					<img  src="img/next.png" alt="" />
				</div>
				<div class="left">
					<img  src="img/prev.png" alt="" />
				</div>
			</div>
	    </div>
		
	</div>
	<div class="section section4"style="background: url(img/room/背景3.jpg)no-repeat;background-size: 100% 100%;">
		<div class="woshi">
			<div class="wo_left"><img src="img/room/阳台.jpg"style="width: 100%;height: 100%;"/></div>
			<ul class="woshi_con">
				<li><img src="img/room/阳台1.jpg"/></li>
				<li><img src="img/room/阳台2.jpg"/></li>
				<li><img src="img/room/阳台3.jpg"/></li>
			</ul>
			<ul class="woshi_con"style="margin-top: 40px;">
				<li><img src="img/1-big-4.jpg"/></li>
				<li><img src="img/2-big-7.jpg"/></li>
				<li><img src="img/3-big-8.jpg"/></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
	window.onload=function(){
	var config = [//config 配置
    {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
    },//0
    {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
    },//1
    {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
    },//2
    {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
    },//3
    {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
    }//4
];//其实就是一个配置单 规定了每张图片的大小位置层级不透明度

	var box=document.getElementById('box'),
		ul=box.children[0],
		lis=ul.children,
		arrow=document.getElementById("arrow"),
		left=arrow.children[0],
		right=arrow.children[1]
	
	
	function dis(){
		for(var i=0;i<lis.length;i++){
		animate(lis[i],config[i])
		}
	}
	dis()
	box.onmouseover=function(){
		animate(arrow,{'opacity':1,'zIndex':10})
	}
	box.onmouseout=function(){
		animate(arrow,{'opacity':0,'zIndex':1})
	}
	left.onclick=function(){
		config.unshift(config.pop())
		dis()
	}
	right.onclick=function(){
		config.push(config.shift())
		dis()
	}
	for(var i=0;i<lis.length;i++){
		lis[i].index=i
		lis[i].onclick=function(){
			for(var k=0;k<config.length;k++){
				if(config[this.index].zIndex==4){
					break
				}else{
					config.push(config.shift())
				}
			}
			dis()
		}
	}
		function animate(obj,json,fn){
		clearInterval(obj.timer)
		obj.timer=setInterval(function(){
			var flag = true; //声明一个阀值
			for(var k in json){
				var distance= json[k]
				if(k=='opacity'){
					var leader = getStyle(obj,k)*100
						distance = distance*100
					var step = (distance - leader)/10
					step = leader>distance? Math.floor(step):Math.ceil(step)
					leader = leader + step
					//设定每一个样式属性值
					obj.style[k] = leader/100
					
					
				}else if(k=='zIndex'){
						var leader = distance;
						obj.style.zIndex=distance
				}else{
					//获取到每一个样式的当前位置
					var leader = parseInt(getStyle(obj,k))
					//json[k] 获取每一个属性的目标距离
					var step = (distance - leader)/10
					step = leader>distance? Math.floor(step):Math.ceil(step)
					
					leader = leader + step
					//设定每一个样式属性值
					obj.style[k] = leader +'px'
					
				}
				if(leader==distance){
						
				}else{
					flag = false 
				}
			}
			if(flag){
				clearInterval(obj.timer)
				fn && fn()
			}
		},16)
	}

	function getStyle(obj,str){
			if(window.getComputedStyle){
				return window.getComputedStyle(obj,null)[str]
			}else{
				return obj.currentStyle[str]
			}
		}
	}
	
	var c=0
	$('.zuo_1').click(function(){
		c--
		if(c<0){
			c=2
		}
		console.log(c)
		$('.can_1').stop().animate({
			left:c*-1000
		})
	})
	$('.you_1').click(function(){
		c++
		if(c>=3){
			c=0
		}
		console.log(c)
		$('.can_1').stop().animate({
			left:c*-1000
		})
		
	})
	/*function zuo(){
		$('.can_1').stop().animate({
			left:100+c*-1000
		})
	}
	function you(){
		$('.can_1').stop().animate({
			left:-100+c*-1000
		})
	}*/
	

</script>